<template>
  <div class="about-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">关于我们</h1>
        <p class="page-subtitle">了解我们的品牌故事与企业文化</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="container">
        <!-- 公司介绍 -->
        <div class="company-intro-section">
          <el-row :gutter="48">
            <el-col
              :span="12"
              :xs="24"
              :sm="24"
              :md="12"
              class="intro-content"
            >
              <div class="intro-text">
                <h2>我们的故事</h2>
                <p>
                  创立于2020年，我们是一家专注于时尚服装设计与销售的现代化企业。
                  自成立以来，我们秉承"品质至上，服务第一"的经营理念，致力于为广大消费者提供优质、时尚、个性化的服装产品。
                </p>
                <p>
                  经过几年的发展，我们已经建立了完善的设计、生产、销售体系，
                  与多家知名供应商建立了长期合作关系，确保产品质量和供应稳定。
                  我们的产品涵盖男装、女装、童装等多个品类，满足不同年龄段和风格需求的消费者。
                </p>
                <div class="company-stats">
                  <el-row :gutter="24">
                    <el-col
                      :span="6"
                      :xs="12"
                      :sm="6"
                    >
                      <div class="stat-item">
                        <div class="stat-number">1000+</div>
                        <div class="stat-label">商品种类</div>
                      </div>
                    </el-col>
                    <el-col
                      :span="6"
                      :xs="12"
                      :sm="6"
                    >
                      <div class="stat-item">
                        <div class="stat-number">50000+</div>
                        <div class="stat-label">忠实用户</div>
                      </div>
                    </el-col>
                    <el-col
                      :span="6"
                      :xs="12"
                      :sm="6"
                    >
                      <div class="stat-item">
                        <div class="stat-number">100+</div>
                        <div class="stat-label">合作品牌</div>
                      </div>
                    </el-col>
                    <el-col
                      :span="6"
                      :xs="12"
                      :sm="6"
                    >
                      <div class="stat-item">
                        <div class="stat-number">99%</div>
                        <div class="stat-label">满意度</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
            <el-col
              :span="12"
              :xs="24"
              :sm="24"
              :md="12"
              class="intro-image"
            >
              <div class="image-container">
                <img
                  src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600&h=400&fit=crop"
                  alt="公司形象"
                />
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 企业文化 -->
        <div class="culture-section">
          <div class="section-header">
            <h2>企业文化</h2>
            <p>我们的核心价值观与文化理念</p>
          </div>
          <el-row :gutter="32">
            <el-col
              :span="8"
              :xs="24"
              :sm="12"
              :md="8"
            >
              <div class="culture-card">
                <div class="culture-icon">
                  <el-icon
                    size="48"
                    color="#409EFF"
                  >
                    <Star />
                  </el-icon>
                </div>
                <h3>品质第一</h3>
                <p>严格把控每一件产品的质量，为客户提供最优质的商品体验。</p>
              </div>
            </el-col>
            <el-col
              :span="8"
              :xs="24"
              :sm="12"
              :md="8"
            >
              <div class="culture-card">
                <div class="culture-icon">
                  <el-icon
                    size="48"
                    color="#67C23A"
                  >
                    <User />
                  </el-icon>
                </div>
                <h3>客户至上</h3>
                <p>以客户需求为导向，提供贴心周到的服务，超越客户期待。</p>
              </div>
            </el-col>
            <el-col
              :span="8"
              :xs="24"
              :sm="12"
              :md="8"
            >
              <div class="culture-card">
                <div class="culture-icon">
                  <el-icon
                    size="48"
                    color="#E6A23C"
                  >
                    <TrendCharts />
                  </el-icon>
                </div>
                <h3>持续创新</h3>
                <p>紧跟时尚潮流，不断创新设计理念，引领行业发展趋势。</p>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 联系我们 -->
        <div class="contact-section">
          <div class="section-header">
            <h2>联系我们</h2>
            <p>多种方式联系我们，我们将竭诚为您服务</p>
          </div>
          <el-row :gutter="32">
            <!-- 联系信息 -->
            <el-col
              :span="12"
              :xs="24"
              :sm="24"
              :md="12"
            >
              <div class="contact-info">
                <h3>联系方式</h3>
                <div class="contact-list">
                  <div class="contact-item">
                    <el-icon color="#409EFF">
                      <Location />
                    </el-icon>
                    <div class="contact-details">
                      <span class="contact-label">公司地址</span>
                      <span class="contact-value">北京市朝阳区时尚大厦18层</span>
                    </div>
                  </div>
                  <div class="contact-item">
                    <el-icon color="#67C23A">
                      <Phone />
                    </el-icon>
                    <div class="contact-details">
                      <span class="contact-label">客服热线</span>
                      <span class="contact-value">400-888-9999</span>
                    </div>
                  </div>
                  <div class="contact-item">
                    <el-icon color="#E6A23C">
                      <Message />
                    </el-icon>
                    <div class="contact-details">
                      <span class="contact-label">邮箱地址</span>
                      <span class="contact-value">service@enterprise-shop.com</span>
                    </div>
                  </div>
                  <div class="contact-item">
                    <el-icon color="#F56C6C">
                      <Clock />
                    </el-icon>
                    <div class="contact-details">
                      <span class="contact-label">服务时间</span>
                      <span class="contact-value">周一至周日 9:00-21:00</span>
                    </div>
                  </div>
                </div>

                <!-- 社交媒体 -->
                <div class="social-media">
                  <h4>关注我们</h4>
                  <div class="social-links">
                    <el-button
                      type="primary"
                      size="large"
                      @click="handleWeChatContact"
                    >
                      <el-icon>
                        <ChatDotRound />
                      </el-icon>
                      微信客服
                    </el-button>
                    <el-button
                      type="success"
                      size="large"
                    >
                      <el-icon>
                        <Platform />
                      </el-icon>
                      微博
                    </el-button>
                    <el-button
                      type="info"
                      size="large"
                    >
                      <el-icon>
                        <Promotion />
                      </el-icon>
                      抖音
                    </el-button>
                  </div>
                </div>
              </div>
            </el-col>

            <!-- 微信二维码 -->
            <el-col
              :span="12"
              :xs="24"
              :sm="24"
              :md="12"
            >
              <div class="qrcode-section">
                <h3>微信扫码联系</h3>
                <div class="qr-container">
                  <div class="qr-code">
                    <img
                      src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=微信号：enterprise-shop2024"
                      alt="微信二维码"
                    />
                  </div>
                  <div class="qr-info">
                    <p class="qr-title">企业微信客服</p>
                    <p class="qr-desc">扫码添加微信，获得专属服务</p>
                    <el-tag
                      type="success"
                      size="large"
                    >7×24小时在线</el-tag>
                  </div>
                </div>

                <!-- 购物指南 -->
                <div class="shopping-guide">
                  <h4>购物指南</h4>
                  <el-timeline>
                    <el-timeline-item
                      timestamp="步骤1"
                      placement="top"
                    >
                      <p>浏览商品，选择心仪款式</p>
                    </el-timeline-item>
                    <el-timeline-item
                      timestamp="步骤2"
                      placement="top"
                    >
                      <p>加入购物车，确认订单信息</p>
                    </el-timeline-item>
                    <el-timeline-item
                      timestamp="步骤3"
                      placement="top"
                    >
                      <p>选择支付方式，完成付款</p>
                    </el-timeline-item>
                    <el-timeline-item
                      timestamp="步骤4"
                      placement="top"
                    >
                      <p>等待发货，跟踪物流信息</p>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 服务保障 */
        <div class="service-guarantee-section">
          <div class="section-header">
            <h2>服务保障</h2>
            <p>完善的售后服务体系，让您购物无忧</p>
          </div>
          <el-row :gutter="24">
            <el-col :span="6" :xs="12" :sm="12" :md="6">
              <div class="service-card">
                <div class="service-icon">
                  <el-icon size="40" color="#67C23A"><Check /></el-icon>
                </div>
                <h4>正品保证</h4>
                <p>所有商品均为正品，支持专柜验货</p>
              </div>
            </el-col>
            <el-col :span="6" :xs="12" :sm="12" :md="6">
              <div class="service-card">
                <div class="service-icon">
                  <el-icon size="40" color="#409EFF"><Refresh /></el-icon>
                </div>
                <h4>7天退换</h4>
                <p>7天无理由退换货，让您放心购物</p>
              </div>
            </el-col>
            <el-col :span="6" :xs="12" :sm="12" :md="6">
              <div class="service-card">
                <div class="service-icon">
                  <el-icon size="40" color="#E6A23C"><Van /></el-icon>
                </div>
                <h4>快速配送</h4>
                <p>全国包邮，48小时内发货</p>
              </div>
            </el-col>
            <el-col :span="6" :xs="12" :sm="12" :md="6">
              <div class="service-card">
                <div class="service-icon">
                  <el-icon size="40" color="#F56C6C"><Service /></el-icon>
                </div>
                <h4>贴心客服</h4>
                <p>专业客服团队，及时解答您的疑问</p>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 公司荣誉 -->
        <div class="honor-section">
          <div class="section-header">
            <h2>公司荣誉</h2>
            <p>多项荣誉证明我们的实力与品质</p>
          </div>
          <el-row :gutter="24">
            <el-col
              :span="8"
              :xs="24"
              :sm="12"
              :md="8"
            >
              <div class="honor-card">
                <div class="honor-image">
                  <el-icon
                    size="60"
                    color="#FFD700"
                  >
                    <Trophy />
                  </el-icon>
                </div>
                <h4>2023年度最佳服装品牌</h4>
                <p>由中国服装协会颁发</p>
              </div>
            </el-col>
            <el-col
              :span="8"
              :xs="24"
              :sm="12"
              :md="8"
            >
              <div class="honor-card">
                <div class="honor-image">
                  <el-icon
                    size="60"
                    color="#FF6B6B"
                  >
                    <Medal />
                  </el-icon>
                </div>
                <h4>消费者信赖品牌</h4>
                <p>由消费者协会认证</p>
              </div>
            </el-col>
            <el-col
              :span="8"
              :xs="24"
              :sm="12"
              :md="8"
            >
              <div class="honor-card">
                <div class="honor-image">
                  <el-icon
                    size="60"
                    color="#4ECDC4"
                  >
                    <Flag />
                  </el-icon>
                </div>
                <h4>质量管理体系认证</h4>
                <p>ISO9001:2015标准认证</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 微信联系对话框 -->
    <el-dialog
      v-model="showWeChatDialog"
      title="微信客服"
      width="400px"
      center
    >
      <div class="wechat-dialog">
        <div class="dialog-qr">
          <img
            src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=微信号：enterprise-shop2024"
            alt="微信二维码"
          />
        </div>
        <div class="dialog-info">
          <h4>扫码添加客服微信</h4>
          <p>微信号：enterprise-shop2024</p>
          <p>工作时间：9:00-21:00</p>
          <el-button
            type="primary"
            @click="copyWeChatId"
          >
            <el-icon>
              <CopyDocument />
            </el-icon>
            复制微信号
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Star,
  User,
  TrendCharts,
  Location,
  Phone,
  Message,
  Clock,
  ChatDotRound,
  Platform,
  Promotion,
  Check,
  Refresh,
  Van,
  Service,
  Trophy,
  Medal,
  Flag,
  CopyDocument
} from '@element-plus/icons-vue'

// 响应式数据
const showWeChatDialog = ref(false)

// 方法
const handleWeChatContact = () => {
  showWeChatDialog.value = true
}

const copyWeChatId = () => {
  navigator.clipboard.writeText('enterprise-shop2024')
  ElMessage.success('微信号已复制到剪贴板')
  showWeChatDialog.value = false
}
</script>

<style scoped>
.about-view {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.page-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
}

.page-subtitle {
  font-size: 20px;
  opacity: 0.9;
}

/* 主要内容 */
.main-content {
  padding: 80px 0;
}

/* 公司介绍 */
.company-intro-section {
  background: white;
  border-radius: 16px;
  padding: 60px;
  margin-bottom: 60px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}

.intro-text h2 {
  font-size: 32px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 24px;
}

.intro-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 24px;
}

.company-stats {
  margin-top: 40px;
}

.stat-item {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.image-container {
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 通用章节样式 */
.culture-section,
.contact-section,
.service-guarantee-section,
.honor-section {
  background: white;
  border-radius: 16px;
  padding: 60px;
  margin-bottom: 60px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 16px;
}

.section-header p {
  font-size: 18px;
  color: #606266;
}

/* 企业文化卡片 */
.culture-card {
  text-align: center;
  padding: 40px 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  margin-bottom: 32px;
}

.culture-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.culture-icon {
  margin-bottom: 24px;
}

.culture-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.culture-card p {
  color: #606266;
  line-height: 1.6;
}

/* 联系信息 */
.contact-info h3,
.qrcode-section h3 {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 32px;
}

.contact-list {
  margin-bottom: 40px;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.contact-item .el-icon {
  margin-right: 16px;
  font-size: 20px;
}

.contact-details {
  display: flex;
  flex-direction: column;
}

.contact-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.contact-value {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.social-media h4,
.shopping-guide h4 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 二维码部分 */
.qr-container {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}

.qr-code {
  margin-right: 24px;
}

.qr-code img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
}

.qr-info {
  flex: 1;
}

.qr-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.qr-desc {
  color: #606266;
  margin-bottom: 12px;
}

/* 服务卡片 */
.service-card,
.honor-card {
  text-align: center;
  padding: 32px 20px;
  border-radius: 12px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
  height: 100%;
  margin-bottom: 24px;
}

.service-card:hover,
.honor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.service-icon,
.honor-image {
  margin-bottom: 20px;
}

.service-card h4,
.honor-card h4 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
}

.service-card p,
.honor-card p {
  color: #606266;
  line-height: 1.5;
}

/* 微信对话框 */
.wechat-dialog {
  text-align: center;
  padding: 20px;
}

.dialog-qr {
  margin-bottom: 24px;
}

.dialog-qr img {
  width: 150px;
  height: 150px;
  border-radius: 8px;
}

.dialog-info h4 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
}

.dialog-info p {
  color: #606266;
  margin-bottom: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 60px 0;
  }

  .page-title {
    font-size: 36px;
  }

  .page-subtitle {
    font-size: 18px;
  }

  .main-content {
    padding: 40px 0;
  }

  .company-intro-section,
  .culture-section,
  .contact-section,
  .service-guarantee-section,
  .honor-section {
    padding: 40px 24px;
    margin-bottom: 40px;
  }

  .section-header h2 {
    font-size: 28px;
  }

  .intro-text h2 {
    font-size: 24px;
  }

  .qr-container {
    flex-direction: column;
    text-align: center;
  }

  .qr-code {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .social-links {
    justify-content: center;
  }

  .social-links .el-button {
    flex: 1;
    min-width: 100px;
  }
}
</style>
